<template>
  <component
    :is="iconComponent"
    :size="computedSize"
    :color="color"
    :class="iconClass"
    :stroke-width="computedStrokeWidth"
    :style="iconStyle"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  Globe,
  Lock,
  User,
  Settings,
  Home,
  Search,
  Plus,
  Edit,
  Delete,
  Check,
  X,
  ChevronDown,
  ChevronUp,
  ChevronLeft,
  ChevronRight,
  Calendar,
  Clock,
  Mail,
  Phone,
  MapPin,
  Star,
  Heart,
  Share,
  Download,
  Upload,
  Eye,
  EyeOff,
  Bell,
  Menu,
  MoreHorizontal,
  MoreVertical,
  Info,
  AlertCircle,
  CheckCircle,
  XCircle,
  HelpCircle,
  Loader,
  RefreshCw,
  ArrowLeft,
  ArrowRight,
  ArrowUp,
  ArrowDown,
  ExternalLink,
  Copy,
  Trash2,
  Save,
  FileText,
  Folder,
  Image,
  Video,
  Music,
  Archive,
  Database,
  Server,
  Cloud,
  Wifi,
  Bluetooth,
  Battery,
  Volume2,
  VolumeX,
  Play,
  Pause,
  SquareStop as Stop,
  SkipBack,
  SkipForward,
  Repeat,
  Shuffle,
  Maximize,
  Minimize,
  Filter,
  ArrowUpDown,
  Grid,
  List,
  Layout,
  Sidebar,
  PanelLeft,
  PanelRight,
  Workflow,
  Zap,
  
  // 状态模块专用图标
  Circle,
  Lightbulb,
  Code,
  Bug,

  Key,
  Unlock,
  UserPlus,
  UserMinus,
  Users,
  UserCheck,
  UserX,
  MessageCircle,
  MessageSquare,
  Send,
  Paperclip,
  Bookmark,
  BookmarkPlus,
  Tag,
  Tags,
  Flag,
  Target,
  Award,
  Gift,
  ShoppingCart,
  CreditCard,
  DollarSign,
  TrendingUp,
  TrendingDown,
  BarChart,
  PieChart,
  Activity,
  Cpu,
  HardDrive,
  Monitor,
  Smartphone,
  Tablet,
  Laptop,
  Printer,
  Camera,
  Headphones,
  Gamepad2,
  Tv,
  Radio,
  Compass,
  Map,
  Navigation,
  Anchor,
  Plane,
  Car,
  Truck,
  Bus,
  Train,
  Bike,
  Ship,
  Rocket,
  Building,
  Building2,
  Factory,
  Store,
  Warehouse,
  School,
  Hospital,
  Church,
  TreePine,
  Flower,
  Sun,
  Moon,
  CloudRain,
  CloudSnow,
  Thermometer,
  Droplets,
  Wind,
  Umbrella,
  Rainbow,
  Sunrise,
  Sunset
} from 'lucide-vue-next'

interface Props {
  name: string
  size?: number | string
  color?: string
  class?: string
  strokeWidth?: number | string
}

const props = withDefaults(defineProps<Props>(), {
  size: 24,
  color: 'currentColor',
  class: '',
  strokeWidth: 2
})

const iconMap = {
  Globe,
  Lock,
  User,
  Settings,
  setting: Settings, // 添加 setting 别名映射
  settings: Settings, // 添加 settings 别名映射
  Home,
  Search,
  Plus,
  plus: Plus, // 添加 plus 别名映射
  Edit,
  edit: Edit, // 添加 edit 别名映射
  Delete,
  delete: Trash2, // 添加 delete 别名映射
  Check,
  check: Check, // 添加 check 别名映射
  X,
  x: X, // 添加 x 别名映射
  close: X, // 添加 close 别名映射
  ChevronDown,
  down: ChevronDown, // 添加 down 别名映射
  ChevronUp,
  ChevronLeft,
  ChevronRight,
  Calendar,
  Clock,
  Mail,
  Phone,
  MapPin,
  Star,
  Heart,
  Share,
  Download,
  Upload,
  Eye,
  EyeOff,
  Bell,
  Menu,
  MoreHorizontal,
  MoreVertical,
  Info,
  AlertCircle,
  CheckCircle,
  XCircle,
  HelpCircle,
  Loader,
  RefreshCw,
  reload: RefreshCw, // 添加 reload 别名映射
  ArrowLeft,
  ArrowRight,
  'arrow-right': ArrowRight, // 添加 arrow-right 别名映射
  ArrowUp,
  ArrowDown,
  ExternalLink,
  Copy,
  copy: Copy, // 添加 copy 别名映射
  Trash2,
  Save,
  FileText,
  Folder,
  Image,
  Video,
  Music,
  Archive,
  Database,
  Server,
  Cloud,
  Wifi,
  Bluetooth,
  Battery,
  Volume2,
  VolumeX,
  Play,
  play: Play, // 添加 play 别名映射
  Pause,
  pause: Pause, // 添加 pause 别名映射
  Stop,
  stop: Stop, // 添加 stop 别名映射
  SkipBack,
  SkipForward,
  Repeat,
  Shuffle,
  Maximize,
  Minimize,
  Filter,
  sort: ArrowUpDown,
  Grid,
  List,
  Layout,
  Sidebar,
  PanelLeft,
  PanelRight,
  Zap,
  Workflow,
  flow: Workflow, // 添加 flow 别名映射
  
  // 状态模块专用图标
  Circle,
  circle: Circle, // 添加 circle 别名映射
  Lightbulb,
  lightbulb: Lightbulb, // 添加 lightbulb 别名映射
  Code,
  code: Code, // 添加 code 别名映射
  Bug,
  bug: Bug, // 添加 bug 别名映射
  rocket: Rocket, // 添加 rocket 别名映射

  Key,
  Unlock,
  UserPlus,
  UserMinus,
  Users,
  UserCheck,
  UserX,
  MessageCircle,
  MessageSquare,
  Send,
  Paperclip,
  Bookmark,
  BookmarkPlus,
  Tag,
  Tags,
  Flag,
  Target,
  Award,
  Gift,
  ShoppingCart,
  CreditCard,
  DollarSign,
  TrendingUp,
  TrendingDown,
  BarChart,
  PieChart,
  Activity,
  Cpu,
  HardDrive,
  Monitor,
  Smartphone,
  Tablet,
  Laptop,
  Printer,
  Camera,
  Headphones,
  Gamepad2,
  Tv,
  Radio,
  Compass,
  Map,
  Navigation,
  Anchor,
  Plane,
  Car,
  Truck,
  Bus,
  Train,
  Bike,
  Ship,
  Rocket,
  Building,
  Building2,
  Factory,
  Store,
  Warehouse,
  School,
  Hospital,
  Church,
  TreePine,
  Flower,
  Sun,
  Moon,
  CloudRain,
  CloudSnow,
  Thermometer,
  Droplets,
  Wind,
  Umbrella,
  Rainbow,
  Sunrise,
  Sunset
}

const iconComponent = computed(() => {
  return iconMap[props.name as keyof typeof iconMap] || iconMap.HelpCircle
})

// 确保传递给 lucide 组件的 size 是数字类型
const computedSize = computed(() => {
  if (typeof props.size === 'number') {
    return props.size
  }
  if (typeof props.size === 'string') {
    const num = parseInt(props.size, 10)
    return isNaN(num) ? 24 : num // 如果解析失败，使用默认值 24
  }
  return 24 // 默认大小
})

// 确保传递给 lucide 组件的 strokeWidth 是数字类型
const computedStrokeWidth = computed(() => {
  if (typeof props.strokeWidth === 'number') {
    return props.strokeWidth
  }
  if (typeof props.strokeWidth === 'string') {
    const num = parseFloat(props.strokeWidth)
    return isNaN(num) ? 2 : num // 如果解析失败，使用默认值 2
  }
  return 2 // 默认线宽
})

const iconClass = computed(() => {
  const classes = ['icon-component']
  
  // 添加基础样式
  classes.push('inline-block', 'align-middle')
  
  // 处理尺寸
  if (typeof props.size === 'number') {
    // 对于数字尺寸，使用内联样式而不是Tailwind类
    classes.push('icon-size-custom')
  } else {
    classes.push(props.size)
  }
  
  // 处理颜色
  if (props.color !== 'currentColor') {
    if (props.color.startsWith('#') || props.color.startsWith('rgb') || props.color.startsWith('hsl')) {
      // 对于自定义颜色值，使用内联样式
      classes.push('icon-color-custom')
    } else {
      // 对于预定义颜色，使用Tailwind类
      classes.push(`text-${props.color}`)
    }
  }
  
  // 添加自定义类
  if (props.class) {
    classes.push(props.class)
  }
  
  return classes.join(' ')
})

// 计算内联样式
const iconStyle = computed(() => {
  const styles: Record<string, string> = {}
  
  if (typeof props.size === 'number') {
    styles.width = `${props.size}px`
    styles.height = `${props.size}px`
  }
  
  if (props.color !== 'currentColor' && 
      (props.color.startsWith('#') || props.color.startsWith('rgb') || props.color.startsWith('hsl'))) {
    styles.color = props.color
  }
  
  return styles
})
</script>

<style scoped>
.icon-component {
  /* 基础图标样式 */
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  
  /* 确保SVG图标正确渲染 */
  svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  /* 改善图标在不同上下文中的对齐 */
  &.align-middle {
    vertical-align: middle;
  }
  
  &.align-top {
    vertical-align: top;
  }
  
  &.align-bottom {
    vertical-align: bottom;
  }
  
  /* 图标悬停效果 */
  &.hover-effect {
    transition: all 0.2s ease-in-out;
    
    &:hover {
      transform: scale(1.1);
    }
  }
  
  /* 图标旋转动画 */
  &.spin {
    animation: icon-spin 1s linear infinite;
  }
  
  &.pulse {
    animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}

@keyframes icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes icon-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 确保图标在按钮中正确对齐 */
.ant-btn .icon-component {
  vertical-align: -0.125em;
}

/* 确保图标在输入框中正确对齐 */
.ant-input-group-addon .icon-component,
.ant-input-suffix .icon-component,
.ant-input-prefix .icon-component {
  vertical-align: middle;
}

/* 确保图标在菜单项中正确对齐 */
.ant-menu-item .icon-component,
.ant-dropdown-menu-item .icon-component {
  vertical-align: middle;
  margin-right: 8px;
}
</style>